<#macro scriptMacro>
  <script>
    layui.use(['form', 'table'], function () {
      var $ = layui.jquery,
          form = layui.form,
          table = layui.table;

      table.render({
        elem: '#musicTable',
        request: {
          pageName: 'current',
          limitName: 'size'
        },
        where: {
          code: $('select[name=code]').val()
        },
        url: '${request.contextPath}/music/pageByQuery',
        method: 'POST',
        cols: [[
          {field: 'id', width: 80, title: 'ID'},
          {field: 'name', width: 150, title: '名称'},
          {field: 'artist', width: 150, title: '演唱者'},
          {field: 'statusDesc', width: 80, title: '状态'},
          {
            field: 'musicUrl',
            width: 400,
            title: '音乐文件地址',
            templet: '<div> <a target="_blank" href="{{d.musicUrl}}">{{d.musicUrl}}</a></div>'
          },
          {field: 'coverUrl', width: 150, title: '封面预览', templet: '#coverPreviewTpl'},
          {
            title: '创建时间',
            width: 180,
            sort: true,
            templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
          },
          {title: '操作', toolbar: '#currentTableBar', align: "center"},
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 10,
        page: true,
        skin: 'line',
        parseData: function (res) {
          var page = res.data;
          if (page) {
            currentPage = page.current;
            return {
              "code": res.code,
              "msg": res.msg,
              "count": page.total,
              "data": page.records
            }
          } else {
            return {
              "code": res.code,
              "msg": res.msg
            }
          }
        },
      });

      $("#searchBtn").on('click', function () {
        reloadTable(1);
      })

      table.on('tool(musicTableFilter)', function (obj) {
        var data = obj.data;
        if (obj.event === 'delete') {
          layer.confirm('真的删除行么', function (index) {
            $.post("${request.contextPath}/music/delete", {
              id: data.id
            }, function (result) {
              layMsg(result.msg);
              if (result.success) {
                layer.close(index);
                reloadTable();
              }
            })
          });
        }
      });

      $("#uploadBtn").on('click', function () {
        layer.open({
          type: 2,
          title: '上传音乐',
          anim: 2,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['600px', '530px'],
          content: '/music/toUpload'
        });
      })
    });

    var currentPage = 1;

    function reloadTable(page) {
      layui.use('table', function () {
        var $ = layui.jquery, table = layui.table;
        //执行搜索重载
        table.reload('musicTable', {
          page: {
            curr: page ? page : currentPage
          },
          where: {
            name: $('input[name=name]').val(),
            artist: $('input[name=artist]').val(),
            status: $('select[name=status]').val(),
          }
        }, true);
      })
    }

  </script>
</#macro>
<@zlt.page title="音乐列表" scriptMacro=scriptMacro>
  <body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <fieldset class="table-search-fieldset">
        <legend>搜索歌曲</legend>
        <div class="layui-form" style="margin: 10px 10px 10px 10px">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">歌名</label>
              <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">演唱者</label>
              <div class="layui-input-inline">
                <input type="text" name="artist" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">状态</label>
              <div class="layui-input-inline">
                <select name="status">
                  <option value="">请选择状态</option>
                    <#list status as s>
                      <option value="${s.value}">${s.desc}</option>
                    </#list>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <button type="button" id="searchBtn" class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜 索
              </button>
              <button type="button" id="uploadBtn" class="layui-btn layui-btn-primary"><i class="fas fa-upload"></i> 上
                传
              </button>
            </div>
          </div>
        </div>
      </fieldset>
      <table class="layui-hide" id="musicTable" lay-filter="musicTableFilter"></table>
    </div>
  </div>
  </body>

  <script type="text/html" id="coverPreviewTpl">
    {{# if(d.coverUrl){ }}
    <img src="{{d.coverUrl}}"/>
    {{# } else { }}
    未上传封面
    {{# } }}
  </script>

  <script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
  </script>
</@zlt.page>